<div class="section">
  <header>
    <h1>Welcome, {{ user?.name }}</h1>
    <p class="description">
      This page is protected by an Auth Guard and uses the <code>*kaHasRoles</code> structural directive to restrict
      access based on user roles.
    </p>
  </header>

  <main>
    <section class="profile-card">
      <h2>Profile Details</h2>
      <p><strong>Name:</strong> {{ user?.name }}</p>
      <p><strong>Email:</strong> {{ user?.email }}</p>
      <p><strong>Username:</strong> {{ user?.username }}</p>
    </section>
  </main>
</div>
